//主题默认色
$BASE_S1: #083e79; //S1智慧天堂
$BASE_S2: #0290fd; //S2商务蓝天
$BASE_S3: #003cb2; // S3蓝色海洋
$BASE_S4: #036638; //S4绿意盎然
$BASE_S5: #4c40ab; //S5紫色天空
$BASE_S6: #a60808; //S6红色中国
$ALL_BASE_COLORS: $BASE_S1, $BASE_S2, $BASE_S3, $BASE_S4, $BASE_S5, $BASE_S6;

@function toHover($color){
  @return rgba(mix($color, rgba(#fff, 0.4)), 1);
}
//悬浮色（基于默认色20%不透明度的白色（#fff）得到悬浮色）
$HOVER_S1: toHover($BASE_S1); //S1智慧天堂
$HOVER_S2: toHover($BASE_S2); //S2商务蓝天
$HOVER_S3: toHover($BASE_S3); //S3蓝色海洋
$HOVER_S4: toHover($BASE_S4); //S4绿意盎然
$HOVER_S5: toHover($BASE_S5); //S5紫色天空
$HOVER_S6: toHover($BASE_S6); //S6红色中国
$ALL_HOVER_COLORS: $HOVER_S1, $HOVER_S2, $HOVER_S3, $HOVER_S4, $HOVER_S5, $HOVER_S6;

@function toClick($color){
  @return rgba(mix($color, rgba(#000, 0.4)), 1);
}
//点击色（叠加上一个20%不透明度的黑色（#000）得到点击色）
$CLICK_S1: toClick($BASE_S1); //S1智慧天堂
$CLICK_S2: toClick($BASE_S2); //S2商务蓝天
$CLICK_S3: toClick($BASE_S3); //S3蓝色海洋
$CLICK_S4: toClick($BASE_S4); //S4绿意盎然
$CLICK_S5: toClick($BASE_S5); //S5紫色天空
$CLICK_S6: toClick($BASE_S6); //S6红色中国
$ALL_CLICK_COLORS: $CLICK_S1, $CLICK_S2, $CLICK_S3, $CLICK_S4, $CLICK_S5, $CLICK_S6;

//如上述颜色规范无法满足，请按照UI标准，自定义六套皮肤对应的组件标准色，如下，然后再$ALL_COLORS变量内注入
//$DEFINE_S1:darken($BASE_S1, 0.2);//S1智慧天堂
//$DEFINE_S2:darken($BASE_S2, 0.2);//S2商务蓝天
//$DEFINE_S3:darken($BASE_S3, 0.2);//S3蓝色海洋
//$DEFINE_S4:darken($BASE_S4, 0.2);//S4绿意盎然
//$DEFINE_S5:darken($BASE_S5, 0.2);//S5紫色天空
//$DEFINE_S6:darken($BASE_S6, 0.2);//S6红色中国
//$ALL_DEFINE_COLORS: $DEFINE_S1, $DEFINE_S2, $DEFINE_S3,...

$SKIN_CLASSNAME: (".lg-skin-s1", ".lg-skin-s2", ".lg-skin-s3", ".lg-skin-s4", ".lg-skin-s5", ".lg-skin-s6");
$SKIN_NAME: ("lg-skin-s1", "lg-skin-s2", "lg-skin-s3", "lg-skin-s4", "lg-skin-s5", "lg-skin-s6");

//遍历集合
$ALL_COLORS: zip($SKIN_CLASSNAME, $ALL_BASE_COLORS, $ALL_HOVER_COLORS, $ALL_CLICK_COLORS);
//(".lg-skin-s6", $BASE_S6, $HOVER_S6, $CLICK_S6, $DEFINE1_S6, $DEFINE2_S6, $DEFINE3_S6, $DEFINE4_S6, $DEFINE5_S6); //自定义规范注入示例

$all_colors: $ALL_COLORS; // $all_colors兼容旧版本

//引用规范：跟随皮肤走的组建内部样式外部必须嵌套下面循环代码
// 例如
// components/button/index.scss
// @import "../index.scss";//引入此文件
// @each $skin, $baseColor, $hoverColor, $clickColor in $ALL_COLORS {
//  #{$skin} {
//    .componentA{
//      color:$baseColor;
//      &:hover{
//        color:$hoverColor;
//      }
//      &:active{
//        color:$clickColor;
//      }
//    }
//  }
// }
//引用规范结束

//侧边栏-深色背景
$sideBar_bgColor_dark_s1:#0c1e31;
$sideBar_bgColor_dark_s2:#2e3e4e;
$sideBar_bgColor_dark_s3:#2b304b;
$sideBar_bgColor_dark_s4:#19342b;
$sideBar_bgColor_dark_s5:#261934;
$sideBar_bgColor_dark_s6:#3a2f2f;
$ALL_SIDEBAR_BGCOLOR_DARK:$sideBar_bgColor_dark_s1,$sideBar_bgColor_dark_s2,$sideBar_bgColor_dark_s3,
$sideBar_bgColor_dark_s4,$sideBar_bgColor_dark_s5,$sideBar_bgColor_dark_s6;

//侧边栏-浅色背景
$sideBar_bgColor_light_s1:#e8edf3;
$sideBar_bgColor_light_s2:#e5f1ff;
$sideBar_bgColor_light_s3:#e5ebf7;
$sideBar_bgColor_light_s4:#e8f1ed;
$sideBar_bgColor_light_s5:#f0eef8;
$sideBar_bgColor_light_s6:#f7ebeb;
$ALL_SIDEBAR_BGCOLOR_LIGHT:$sideBar_bgColor_light_s1,$sideBar_bgColor_light_s2,$sideBar_bgColor_light_s3,
$sideBar_bgColor_light_s4,$sideBar_bgColor_light_s5,$sideBar_bgColor_light_s6;

//选中渐变色
$sideBar_item_s1:linear-gradient(270deg, #1c84f8 , #238bff );
$sideBar_item_s2:linear-gradient(270deg, #219fff , #0290fd );
$sideBar_item_s3:linear-gradient(270deg, #006af2 , #1e81ff );
$sideBar_item_s4:linear-gradient(270deg, #09a142 , #2ab75e );
$sideBar_item_s5:linear-gradient(270deg, #734aad , #8560bb );
$sideBar_item_s6:linear-gradient(270deg, #a50707 , #b21717 );
$ALL_SIDEBAR_ITEM:
$sideBar_item_s1,$sideBar_item_s2,$sideBar_item_s3,
$sideBar_item_s4,$sideBar_item_s5,$sideBar_item_s6;

//底部按钮颜色-浅
$sideBar_bottom_light_s1:#083e79;
$sideBar_bottom_light_s2:#0072ff;
$sideBar_bottom_light_s3:#083e79;
$sideBar_bottom_light_s4:#036638;
$sideBar_bottom_light_s5:#4c40ab;
$sideBar_bottom_light_s6:#950809;
$ALL_SIDEBAR_BOTTOM_LIGHT:
$sideBar_bottom_light_s1,$sideBar_bottom_light_s2,$sideBar_bottom_light_s3,
$sideBar_bottom_light_s4,$sideBar_bottom_light_s5,$sideBar_bottom_light_s6;

//收缩模式下子项选择的悬浮色
$sideBar_bgColorHover_s1:#e5ebf1; 
$sideBar_bgColorHover_s2:#e5f1ff;
$sideBar_bgColorHover_s3:#eff3fa;
$sideBar_bgColorHover_s4:#f3f7f5;
$sideBar_bgColorHover_s5:#f5f3fa;
$sideBar_bgColorHover_s6:#f8efef;
$ALL_SIDEBAR_POPITEM_HOVER:
$sideBar_bgColorHover_s1,$sideBar_bgColorHover_s2,$sideBar_bgColorHover_s3,
$sideBar_bgColorHover_s4,$sideBar_bgColorHover_s5,$sideBar_bgColorHover_s6;

// 背景色
$bgColor_s1: #f4f6f9;
$bgColor_s2: #f1f7ff;
$bgColor_s3: #f4f6fb;
$bgColor_s4: #f4f8f6;
$bgColor_s5: #f8f7fb;
$bgColor_s6: #faf4f4;
$ALL_BG_COLORS: $bgColor_s1, $bgColor_s2, $bgColor_s3, $bgColor_s4, $bgColor_s5, $bgColor_s6;

$All_SiDEBAR_COLORS:zip(
  $SKIN_CLASSNAME,    /* 皮肤名字 */
  $ALL_BASE_COLORS,   /* 基础色 */
  $ALL_BG_COLORS,     /* 背景色 */
  $ALL_HOVER_COLORS,  /* 悬浮色 */
  $ALL_CLICK_COLORS,  /* 点击色 */
  $ALL_SIDEBAR_BGCOLOR_DARK,  /* 侧边栏深色背景 */
  $ALL_SIDEBAR_BGCOLOR_LIGHT, /* 侧边栏浅色背景 */
  $ALL_SIDEBAR_ITEM,          /* item选中渐变色 */
  $ALL_SIDEBAR_BOTTOM_LIGHT,  /* 底部浅色背景 */
  $ALL_SIDEBAR_POPITEM_HOVER /* 收缩模式下子项选择的悬浮色 */
);

//背景纹理图透明度
$sideBar_opacity_s1:0.9;
$sideBar_opacity_s2:0.9;
$sideBar_opacity_s3:0.2;
$sideBar_opacity_s4:0.2;
$sideBar_opacity_s5:0.9;
$sideBar_opacity_s6:0.9;
$ALL_SIDEBAR_OPACITY:
$sideBar_opacity_s1,$sideBar_opacity_s2,$sideBar_opacity_s3,
$sideBar_opacity_s4,$sideBar_opacity_s5,$sideBar_opacity_s6;

$All_SiDEBAR_BACKGROUNDIMAGE:zip(
  $SKIN_NAME,
  $ALL_SIDEBAR_OPACITY,
);

:export {
    allSkin: "lg-skin-s1", "lg-skin-s2", "lg-skin-s3", "lg-skin-s4", "lg-skin-s5", "lg-skin-s6";
    skinName: "S1智慧经典", "S2商务蓝天", "S3蓝色海洋", "S4绿意盎然", "S5紫色天空", "S6红色中国";
}
.s{
   transform: scale(0); 
}

